<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CClub在线笔试</title>
    <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        *{
            margin: 0 0px;
            padding: 0 0px;
        }
        .el-header{
            background-color:#f2f5ff;
            width:100%;
            height:50px;
        }
        .el-border{
            width:1468px;
            border:1px solid rgb(230,230,230);
            margin-left:35px;
            margin-top:25px;
        }
        .el-bg{
            width:1468px;
            margin-left:35px;
            margin-top:20px;
            background-color:rgb(246, 248, 255);
            height:120px;
        }
        .el-option{
            width:1300px;
            background-color:#e9f8f5;
            margin-top:15px;
        }
        .el-option:hover{
            background-color:#27ba9c;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="el-header">
        <div style="font-weight:700;margin-left:15px;margin-top:10px;width:1175px;float:left;">
            {{exam.exam_name}}
        </div>
        <div style="color:#5272ff;float:left;margin-top:17px;font-weight:700;">
            距离结束:
        </div>
        <div style="float:left;color:#5272ff;font-size:24px;font-weight:700;margin-left:10px;margin-top:10px;">
            {{time.hour}}:{{time.minute}}:{{time.second}}
        </div>
        <div style="float:left;margin-top:10px;margin-left:15px;">
            <el-button type="primary" size="small" @click="vedioStop">
                <span><i class="el-icon-s-promotion"></i></span>
                <spans style="margin-left:5px;">我要交卷</spans>
            </el-button>
        </div>
    </div>
    <div class="el-border">
        <!--判断题-->
        <div style="margin-bottom:30px;" v-if="nowQuestionType===3">
            <div style="margin-left:20px;margin-top:20px;">
                <div style="float:left;font-size:14px;">{{nowQuestionIndex}}.[判断题]</div>
                <div style="float:left;margin-left:50px;font-size:13px;">{{nowQuestion.judge_question_name}}</div>
            </div>
            <div style="margin-left:130px;padding-top:30px;">
                <div class="el-option">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-radio v-model="questionAnswer[nowQuestionIndex-1].judge" :label="nowQuestion.judge_question_option_true">{{nowQuestion.judge_question_option_true}}</el-radio>
                        </div>
                    </a>
                </div>
                <div class="el-option">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-radio v-model="questionAnswer[nowQuestionIndex-1].judge" :label="nowQuestion.judge_question_option_false">{{nowQuestion.judge_question_option_false}}</el-radio>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!--单选题-->
        <div style="margin-bottom:30px;" v-if="nowQuestionType===1">
            <div style="margin-left:20px;margin-top:20px;">
                <div style="float:left;font-size:14px;">{{nowQuestionIndex}}.[单选题]</div>
                <div style="float:left;margin-left:50px;font-size:13px;">{{nowQuestion.choice_question_name}}</div>
            </div>
            <div style="margin-left:130px;padding-top:30px;">
                <div class="el-option">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-radio v-model="questionAnswer[nowQuestionIndex-1].singleChoice" :label="nowQuestion.choice_question_option_A">
                                {{nowQuestion.choice_question_option_A}}
                            </el-radio>
                        </div>
                    </a>
                </div>
                <div class="el-option">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-radio v-model="questionAnswer[nowQuestionIndex-1].singleChoice" :label="nowQuestion.choice_question_option_B">
                                {{nowQuestion.choice_question_option_B}}
                            </el-radio>
                        </div>
                    </a>
                </div>
                <div class="el-option">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-radio v-model="questionAnswer[nowQuestionIndex-1].singleChoice" :label="nowQuestion.choice_question_option_C">
                                {{nowQuestion.choice_question_option_C}}
                            </el-radio>
                        </div>
                    </a>
                </div>
                <div class="el-option" v-if="nowQuestion.choice_question_option_D!=null">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-radio v-model="questionAnswer[nowQuestionIndex-1].singleChoice" :label="nowQuestion.choice_question_option_D">
                                {{nowQuestion.choice_question_option_D}}
                            </el-radio>
                        </div>
                    </a>
                </div>
                <div class="el-option" v-if="nowQuestion.choice_question_option_E!=null">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-radio v-model="questionAnswer[nowQuestionIndex-1].singleChoice" :label="nowQuestion.choice_question_option_E">
                                {{nowQuestion.choice_question_option_E}}
                            </el-radio>
                        </div>
                    </a>
                </div>
                <div class="el-option" v-if="nowQuestion.choice_question_option_F!=null">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-radio v-model="questionAnswer[nowQuestionIndex-1].singleChoice" :label="nowQuestion.choice_question_option_F">
                                {{nowQuestion.choice_question_option_F}}
                            </el-radio>
                        </div>
                    </a>
                </div>
                <div class="el-option" v-if="nowQuestion.choice_question_option_G!=null">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-radio v-model="questionAnswer[nowQuestionIndex-1].singleChoice" :label="nowQuestion.choice_question_option_G">
                                {{nowQuestion.choice_question_option_G}}
                            </el-radio>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!--多选题-->
        <div style="margin-bottom:30px;" v-if="nowQuestionType===2">
            <div style="margin-left:20px;margin-top:20px;">
                <div style="float:left;font-size:14px;">{{nowQuestionIndex}}.[多选题]</div>
                <div style="float:left;margin-left:50px;font-size:13px;">{{nowQuestion.choice_question_name}}</div>
            </div>
            <div style="margin-left:130px;padding-top:30px;">
                <div class="el-option">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-checkbox  v-model="questionAnswer[nowQuestionIndex-1].multipleChoice" :label="nowQuestion.choice_question_option_A" @change="change">
                                {{nowQuestion.choice_question_option_A}}
                            </el-checkbox>
                        </div>
                    </a>
                </div>
                <div class="el-option">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-checkbox  v-model="questionAnswer[nowQuestionIndex-1].multipleChoice" :label="nowQuestion.choice_question_option_B" @change="change">
                                {{nowQuestion.choice_question_option_B}}
                            </el-checkbox>
                        </div>
                    </a>
                </div>
                <div class="el-option">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-checkbox v-model="questionAnswer[nowQuestionIndex-1].multipleChoice" :label="nowQuestion.choice_question_option_C" @change="change">
                                {{nowQuestion.choice_question_option_C}}
                            </el-checkbox>
                        </div>
                    </a>
                </div>
                <div class="el-option" v-if="nowQuestion.choice_question_option_D!=null">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-checkbox  v-model="questionAnswer[nowQuestionIndex-1].multipleChoice" :label="nowQuestion.choice_question_option_D" @change="change">
                                {{nowQuestion.choice_question_option_D}}
                            </el-checkbox>
                        </div>
                    </a>
                </div>
                <div class="el-option" v-if="nowQuestion.choice_question_option_E!=null">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-checkbox v-model="questionAnswer[nowQuestionIndex-1].multipleChoice" :label="nowQuestion.choice_question_option_E">
                                {{nowQuestion.choice_question_option_E}}
                            </el-checkbox>
                        </div>
                    </a>
                </div>
                <div class="el-option" v-if="nowQuestion.choice_question_option_F!=null">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-checkbox v-model="questionAnswer[nowQuestionIndex-1].multipleChoice" :label="nowQuestion.choice_question_option_F">
                                {{nowQuestion.choice_question_option_F}}
                            </el-checkbox>
                        </div>
                    </a>
                </div>
                <div class="el-option" v-if="nowQuestion.choice_question_option_G!=null">
                    <a href="javascript:void(0);">
                        <div style="padding:8px;">
                            <el-checkbox v-model="questionAnswer[nowQuestionIndex-1].multipleChoice" :label="nowQuestion.choice_question_option_G">
                                {{nowQuestion.choice_question_option_G}}
                            </el-checkbox>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!--填空题-->
        <div style="margin-bottom:30px;" v-if="nowQuestionType===4">
            <div style="margin-left:20px;margin-top:20px;">
                <div style="float:left;font-size:14px;">{{nowQuestionIndex}}.[填空题]</div>
                <div style="float:left;margin-left:50px;font-size:13px;">{{nowQuestion.completion_question_name}}</div>
            </div>
            <div style="margin-left:130px;padding-top:30px;">
                <div v-for="i in nowQuestion.completion_question_answer.split(',').length" style="margin-top:15px;">
                    <el-input v-model="questionAnswer[nowQuestionIndex-1].completion[i]" size="small" style="width:1300px;"></el-input>
                </div>
            </div>
        </div>
    </div>
    <div class="el-bg">
        <div style="margin-left:15px;padding-top:15px;">答题卡</div>
        <div style="margin-top:20px;margin-left:10px;">
            <div style="float:left;margin-left:5px;" v-for="i in choiceQuestion.length+judgeQuestion.length+completionQuestion.length">
                <el-button size="mini" style="width:45px;" v-if="nowQuestionIndex!=i&&finishQuestion.indexOf(i)===-1" @click="clickQuestion(i)">{{i}}</el-button>
                <el-button type="primary" size="mini" style="width:45px;" v-if="nowQuestionIndex===i" @click="clickQuestion(i)">{{i}}</el-button>
                <el-button type="success" size="mini" style="width:45px;" v-if="finishQuestion.indexOf(i)!=-1&&nowQuestionIndex!=i">{{i}}</el-button>
            </div>
        </div>
    </div>
    <div style="margin-left:650px;margin-top:10px;">
        <div style="float:left;" v-if="nowQuestionIndex===1">
            <el-button type="success" size="small" style="width:100px;" @click="preQuestion" disabled  plain>上一题</el-button>
        </div>
        <div style="float:left;" v-if="nowQuestionIndex!=1">
            <el-button type="success" size="small" style="width:100px;" @click="preQuestion" plain>上一题</el-button>
        </div>
        <div style="float:left;margin-left:10px;" v-if="nowQuestionIndex===choiceQuestion.length+judgeQuestion.length+completionQuestion.length">
            <el-button type="primary" size="small" style="width:100px;" @click="nextQuestion" disabled>下一题</el-button>
        </div>
        <div style="float:left;margin-left:10px;" v-if="nowQuestionIndex!=choiceQuestion.length+judgeQuestion.length+completionQuestion.length">
            <el-button type="primary" size="small" style="width:100px;" @click="nextQuestion" >下一题</el-button>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
            radio: '0',
            exam:{},
            choiceQuestion:[],
            judgeQuestion:[],
            completionQuestion:[],
            nowQuestionIndex:1,
            nowQuestion:{},
            selected:[],
            input: '',
            nowQuestionType:0,
            finishQuestion:[],
            time:{
                hour: '',
                minute: '',
                second: ''
            },
            questionAnswer:[],
            recorder: ''
        },
        mounted(){
            document.addEventListener('visibilitychange', this.handleVisiable)
        },
        created(){
            this.getExamInfo();
        },
        methods:{
            async getExamInfo(){
                let url=window.location.href.split("/");
                let result=await axios.get('/getOneExamInfo?exam_id='+url[url.length-1]);
                this.exam=result.data;
                this.exam.exam_user_info=eval('('+this.exam.exam_user_info+')');
                this.showExamTime();
                this.getQuestionList();
                this.vedioStart();
            },
            async getQuestionList() {
                let url=window.location.href.split("/");
                let result=await axios.get('/getChoiceQuestionListByExamId?exam_id='+url[url.length-1]);
                this.choiceQuestion=result.data;
                result=await axios.get('/getJudgeQuestionByExamId?exam_id='+url[url.length-1]);
                this.judgeQuestion=result.data;
                result=await axios.get('/getCompletionQuestionListByExamId?exam_id='+url[url.length-1]);
                this.completionQuestion=result.data;
                if(this.exam.exam_Upset_question===1){
                    this.swapQuestion();
                }
                this.getQuestionType();
                this.initQuestionAnswer();
                this.getCacheQuestionOption();
            },
            clickQuestion(index){
                this.cacheQuestionOption();
                this.nowQuestionIndex=index;
                this.getQuestionType();
            },
            getQuestionType(){
                if(this.nowQuestionIndex<=this.choiceQuestion.length){
                    this.nowQuestion=this.choiceQuestion[this.nowQuestionIndex-1];
                    if(this.nowQuestion.choice_question_answer.split(" ").length>1){
                        this.nowQuestionType=2;
                    }else{
                        this.nowQuestionType=1;
                    }
                }else if(this.nowQuestionIndex<=this.choiceQuestion.length+this.judgeQuestion.length){
                    this.nowQuestion=this.judgeQuestion[this.nowQuestionIndex-this.choiceQuestion.length-1];
                    this.nowQuestionType=3;
                }else{
                    this.nowQuestion=this.completionQuestion[this.nowQuestionIndex-this.choiceQuestion.length-this.judgeQuestion.length-1];
                    this.nowQuestionType=4;
                }
            },
            preQuestion(){
                this.cacheQuestionOption();
                this.nowQuestionIndex--;
                this.getQuestionType();
            },
            nextQuestion(){
                this.cacheQuestionOption();
                this.nowQuestionIndex++;
                this.getQuestionType();
            },
            showExamTime(){
                let time=this.exam.exam_start_time;
                let time1=time.split(" ")[1].split(":")[0];
                let time2=time.split(" ")[1].split(":")[1];
                time1=parseInt(time1)+Math.floor(this.exam.exam_longTime/60);
                time2=parseInt(time2)+this.exam.exam_longTime%60;
                if(time2>=60){
                    time2-=60;
                    time1++;
                }
                let timeStr=time.split(" ")[0]+" "+time1+":"+time2;
                let endTime=new Date(timeStr);
                console.log(endTime);
                let timer=setInterval(() => {
                    let date=endTime-new Date();
                    if(date<=0){
                        window.location.href="/test_after_exam_end/"+this.exam.exam_id;
                    }
                    let days = Math.floor(date / 1000 / 60 / 60 / 24) // 从这里开始
                    let daysmod = date - days * 24 *60 * 60 * 1000
                    let hours = Math.floor(daysmod / 1000 / 60 / 60)
                    let hoursmod = date - (days * 24 *60 * 60 * 1000) - (hours * 1000 * 60 * 60)
                    let minutes = Math.floor(hoursmod / 1000 / 60)
                    let minutesmod = date - (days * 24 *60 * 60 * 1000) - (hours * 1000 * 60 * 60) - (minutes * 1000 * 60)
                    let seconds = Math.floor(minutesmod / 1000) // 到这里结束，是将总毫秒转化成对应天数+小时数+分钟数+秒数的转换方法
                    this.timeUtils(days,hours,minutes,seconds);
                }, 1000);
            },
            timeUtils(day,hour,minute,second){
                if(day+hour+minute+second===0){
                    this.state=4;
                    this.showStartExamTime();
                }else{
                    this.time.day=day<10?('0'+day):day;
                    this.time.hour=hour<10?('0'+hour):hour;
                    this.time.minute=minute<10?('0'+minute):minute;
                    this.time.second=second<10?('0'+second):second;
                }
            },
            async cacheQuestionOption(){
                let answer= '',question_id;
                if(this.nowQuestionType===1){
                    answer=this.questionAnswer[this.nowQuestionIndex-1].singleChoice;
                    question_id=this.nowQuestion.choice_question_id;
                }else if(this.nowQuestionType===2){
                    for(let i=0;i<this.questionAnswer[this.nowQuestionIndex-1].multipleChoice.length;i++){
                        answer+=this.questionAnswer[this.nowQuestionIndex-1].multipleChoice[i];
                        if(i<this.questionAnswer[this.nowQuestionIndex-1].multipleChoice.length-1){
                            answer+=',';
                        }
                    }
                    question_id=this.nowQuestion.choice_question_id;
                }else if(this.nowQuestionType===3){
                    answer=this.questionAnswer[this.nowQuestionIndex-1].judge;
                    question_id=this.nowQuestion.judge_question_id;
                }else if(this.nowQuestionType===4){
                    answer=this.questionAnswer[this.nowQuestionIndex-1].completion[1];
                    question_id=this.nowQuestion.completion_question_id;
                }
                let result=await axios.get('/cacheUserAnswer?exam_id='+this.exam.exam_id+"&question_id="+question_id+"&answer="+answer);
            },
            initQuestionAnswer(){
                let size=this.choiceQuestion.length+this.judgeQuestion.length+this.completionQuestion.length;
                for(let i=0;i<size;i++){
                    let question_id='';
                    if(i<this.choiceQuestion.length){
                        question_id=this.choiceQuestion[i].choice_question_id;
                    }else if(i>=this.choiceQuestion.length&&i<this.judgeQuestion.length+this.choiceQuestion.length){
                        question_id=this.judgeQuestion[i-this.choiceQuestion.length].judge_question_id;
                    }else{
                        question_id=this.completionQuestion[i-this.judgeQuestion.length-this.choiceQuestion.length].completion_question_id;
                    }
                    let obj={
                      'question_id': question_id,
                      'singleChoice': '',
                      'multipleChoice': [],
                      'judge':'',
                      'completion': []
                    };
                    this.questionAnswer.push(obj);
                }
            },
            change(){
                console.log(this.questionAnswer[this.nowQuestionIndex-1].multipleChoice);
            },
            async getCacheQuestionOption(){
                let result=await axios.get('/getExamQuestionUserAnswer?exam_id='+this.exam.exam_id);
                let type={};
                console.log(result.data);
                let size=this.choiceQuestion.length+this.judgeQuestion.length+this.completionQuestion.length;
                for(let i=0;i<size;i++){
                    if(i<this.choiceQuestion.length){
                        if(this.choiceQuestion[i].choice_question_answer.split(" ").length>1){
                            type[i]=2;
                        }else{
                            type[i]=1;
                        }
                    }else if(i>=this.choiceQuestion.length&&i<this.judgeQuestion.length+this.choiceQuestion.length){
                        type[i]=3;
                    }else{
                        type[i]=4;
                    }
                }
                for(let i=0;i<result.data.length;i++){
                    for(let j=0;j<this.questionAnswer.length;j++){
                        if(result.data[i].question_id===this.questionAnswer[j].question_id){
                            if(type[j]===1){
                                this.questionAnswer[j].singleChoice=result.data[i].answer;
                            }else if(type[j]===2){
                                this.questionAnswer[i].multipleChoice=result.data[i].answer.split(",");
                            }else if(type[j]===3){
                                this.questionAnswer[j].judge=result.data[i].answer;
                            }else{
                                this.questionAnswer[j].completionQuestion=result.data[i].answer.split(",")
                            }
                        }
                    }
                }
                console.log(this.questionAnswer);
            },
            async handleVisiable(e){
                if(document.hidden){
                    let result=await axios.get('/getExamUserSkipNumber?exam_id='+this.exam.exam_id);
                    this.$message({
                        showClose: true,
                        message: '请不要切换页面,目前已经切换'+result.data+"次",
                        type: 'error'
                    });
                }
            },
            swapQuestion(){
                for(let i=0;i<this.choiceQuestion.length;i++){
                    let rand_i=Math.floor(Math.random()*(this.choiceQuestion.length+1));
                    let rand_j=this.choiceQuestion.length-1-rand_i;
                    let swap_i=this.swapOption(this.choiceQuestion[rand_i]);
                    let swap_j=this.swapOption(this.choiceQuestion[rand_j]);
                    this.choiceQuestion[rand_i]=swap_j;
                    this.choiceQuestion[rand_j]=swap_i;
                }
            },
            swapOption(obj){
                console.log(obj);
                if(this.exam.exam_Upset_answer===1){
                    let options=[],j=3;
                    options[0]=obj.choice_question_option_A;
                    options[1]=obj.choice_question_option_B;
                    options[2]=obj.choice_question_option_C;
                    if(obj.choice_question_option_D!=null){
                        options[j++]=obj.choice_question_option_D;
                    }
                    if(obj.choice_question_option_E!=null){
                        options[j++]=obj.choice_question_option_E;
                    }
                    if(obj.choice_question_option_F!=null){
                        options[j++]=obj.choice_question_option_F;
                    }
                    if(obj.choice_question_option_G!=null){
                        options[j++]=obj.choice_question_option_G;
                    }
                    for(let i=0;i<j;i++){
                        let rand_i=Math.floor(Math.random()*(j+1));
                        let rand_j=(j-1)-rand_i;
                        let temp=options[rand_i];
                        options[rand_i]=options[rand_j];
                        options[rand_j]=temp;
                    }
                    obj.choice_question_option_A=options[0];
                    obj.choice_question_option_B=options[1];
                    obj.choice_question_option_C=options[2];
                    obj.choice_question_option_D=j>3?options[3]:null;
                    obj.choice_question_option_E=j>4?options[4]:null;
                    obj.choice_question_option_F=j>5?options[5]:null;
                    obj.choice_question_option_G=j>6?options[6]:null;
                }
                return obj;
            },
            vedioStart(){
                navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})
                    .then((stream) => {
                        this.recorder = new MediaRecorder(stream);
                        this.recorder.ondataavailable = (event) => {
                            console.log(event.data);
                            this.endExam(event.data);
                        };
                        this.recorder.start();
                });
            },
            vedioStop(){
                this.recorder.stop();
            },
            async endExam(data){
                this.cacheQuestionOption();
                let params=new FormData();
                params.append("exam_id",this.exam.exam_id);
                params.append("vedio",data);
                let result=await axios({
                    method: 'post',
                    url: '/endExam',
                    data: params,
                    headers:{
                        "Content-Type": "multipart/form-data"
                    }
                });
                if(result.data===1){
                    window.location.href="/test_after_exam_end/"+this.exam.exam_id;
                }
            }
        }
    })
</script>
</html>